<template>
	<div class="index"  style="min-height: 100vh;" >
    <van-nav-bar title="本月经验" left-arrow  @click-left="onClickLeft" />
    <div>
      <div style="padding: 0.3rem; font-size: 0.24rem; background: #fff;">
        <div>
          <div class="flexcc">

            <img :src="'https://file.91haoka.cn/gerenxitong/dj'+dj.level+'.png'">
          </div>
          <div class="flexcc">{{djrules.name}}：{{dj.exp}}</div>
        </div>

      </div>
      <div style="padding: 0.3rem; background: rgb(247, 247, 247);">
        <div style="background: #fff; padding: 0.3rem; font-size: 0.28rem;" class="flexb">
          <div>本月经验</div>
          <div style="text-align: right;" @click="show = true">{{search.month}}</div>
        </div>
        <van-list  v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="onLoad">
            <div class="flexb" style="background: #fff;padding:0.2rem 0.3rem; border-top: 1px #eaeaea solid;" v-for="item in list" :key="item">
              <div>
                <div style="font-size: 0.28rem; margin-bottom: 0.1rem;">{{item.title}}</div>
                <div style="color: rgb(159, 159, 159); font-size: 0.2rem; margin-bottom: 0.1rem;">{{item.created_at}}</div>
                <div style="color: rgb(159, 159, 159); font-size: 0.2rem; margin-bottom: 0.1rem;">{{item.remark}}</div>
              </div>
              <div style="text-align: right;">
                <div style="color: rgb(0, 90, 255); font-size: 0.26rem; font-weight: bold; margin-bottom: 0.1rem;">{{item.add_exp}}</div>
                <div style="color: rgb(159, 159, 159); font-size: 0.28rem;">结余{{item.new_exp}}</div>
              </div>
            </div>
        </van-list>


      </div>
    </div>

    <van-popup v-model="show"  position="bottom" style="width: 7.5rem;">
    	<van-datetime-picker v-model="date"  @confirm="onConfirm" type="year-month"  title="选择月日" />
    </van-popup>

	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
		data() {
			return {
        alls:"",
        show:false,
        list:[],
        search:{
          page:1,
          page_size:20,
          month:moment().format('YYYY-MM')
        },

        loading: false,
        finished: false,

        dj:"",
        date:moment().format('YYYY-MM'),
        djrules:""
			}
		},
		created() {
      this.getinfo()
      this.search.month = moment().format('YYYY-MM')
		},
		mounted() {


      document.title = localStorage.getItem("store_title")
      // document.title = "下单成功"
      // this.onLoad()
		},
		methods: {
      onConfirm:function(val){
        this.search.month = moment(val).format('YYYY-MM')
        this.date = moment(val).format('YYYY-MM')
        this.show = false
        this.list = []
        this.onLoad()
      },
      getinfo:function(){

        axios.get('/agent/level/info').then((response)=>{
        	if (response.data.msg.code == 0) {
           this.dj = response.data.data
        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })
        axios.get('/agent/level/ruleandcon').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.djrules = response.data.data
          }else {
        		vant.Toast(response.data.msg.info);
        	}
        })





      },
      onLoad() {
        axios.get('/agent/level/explog',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.data.length > 0){
              response.data.data.data.forEach(item=>{
                this.list.push(item)
              })
              if (this.list.length >= response.data.data.total) {

                this.finished = true;
              }else{

                this.search.page++
                this.loading = false;
              }
            }

        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      onClickLeft:function(){
        this.$router.back(-2)
      }
		}
	}
</script>


<style scoped lang="less">
  .index{
    .af{ position: relative; z-index: 2;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgb(232, 237, 252);
        z-index: -1;
      }
    }
    /deep/ .van-tabs__nav{ background: transparent !important;}
    /deep/ .van-tabs--line .van-tabs__wrap{ height: auto !important;}
    /deep/ .van-tabs__line{ display: none;}
  }
</style>
